<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_order.sendComment }}</view>
				<view></view>
			</view>
		</view>
		
		<view style="padding: 20rpx 36rpx 0;" v-for="(item, index) in itemList" :key="index">
			<view class="bg-white">
				<view v-if="![5, 6, 7].includes(dataInfo.orderType)" style="padding: 22rpx 14rpx 0 34rpx;">
					<view class="flex">
						<view style="width: 218rpx; height: 168rpx;background-color: #f9f9f9;">
							<x-image :src="showImage(item.goodsImage, 'logo')" class="clear-flex"></x-image>
						</view>
						<view class="u-m-l-18">
							<view class="u-f-30 u-lh-42 font-medio linecamp-2" style="height: 84rpx;">{{ item.goodsName || '' }}</view>
							<view class="u-m-t-6 u-f-26 u-lh-36 color-grew">{{ item.stockSpecs || '' }}</view>
							<x-rate v-model="forms[index].score" :disabled="false" :min-count="1" :text="dealText(forms[index].score)"></x-rate>
						</view>
					</view>
				</view>
				
				<view v-else class="clear-flex">
					<coupon-card :item="dealCoupon(item)" disabled></coupon-card>
					<view class="flex" style="padding: 0 14rpx 0 34rpx;">
						<view style="width: calc(218rpx + 18rpx);height: 30rpx;" class="clear-flex"></view>
						<x-rate v-model="forms[index].score" :disabled="false" :min-count="1" :text="dealText(forms[index].score)"></x-rate>
					</view>
				</view>
				
				<view style="padding: 46rpx 14rpx 0 34rpx;">
					<textarea
					 v-model="forms[index].content"
					 :placeholder="lang_order.orderCommentTips"
					 class="u-f-32 u-lh-44"
					 style="width: 100%"
					 maxlength="-1"
					 :rows="7"/>
				</view>
				<view class="u-p-t-46" style="padding: 0 20rpx;">
					<x-upload v-model="forms[index].imgUrls" @fail="cameraUnSetVisible = true"></x-upload>
				</view>
			</view>
		</view>
		
		<x-fixed-bottom padding-top="20">
			<view class="flex-center-center" style="padding-bottom: 40rpx;">
				<x-common-btn @click="saveAction" :disabled="!authSubmit">
					<view>{{ lang_common.done }}</view>
				</x-common-btn>
			</view>
		</x-fixed-bottom>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { orderComment } from '@/api/user/order.js'

	export default {
		data() {
			return {
				forms: [],
				orderNumber: '',
				dataInfo: {},
				
				isClick: false,
				settingValue: ''
			}
		},
		computed: {
			itemList() {
				return this.dataInfo.itemList || []
			},
			authSubmit() {
				let keys = [
					{ tipsKey: 'commentContentTips', key: 'content', tips: '请输入评价内容' },
					{ tipsKey: 'commentImageTips', key: 'imgUrls', tips: '请上传图片' }
				]
				let list = this.forms
				for (let i = 0, len = list.length; i < len; i++) {
					let item = list[i]
					let index = keys.findIndex(_item => !item[_item.key])
					if (index > -1) return false
				}
				return true
			}
		},
		onLoad({ orderNumber }) {
			this.orderNumber = orderNumber
			// 获取页面数据
			let event = this.getOpenerEventChannel();
			event.on('order-comment-page', item => {
				console.log(item)
				this.dataInfo = item || {}
				this.forms = this.itemList.map(({ goodsId, stockSpecs }) => ({ score: 5, goodsId, specs: stockSpecs }))
			})
		},
		methods: {
			// 处理优惠券信息
			dealCoupon(item) {
				let { merchantName, merchantId } = this.dataInfo || {}
				let { goodsName: title } = item || {}
				return ({ ...item, merchantName, merchantId, title, couponType: 5 })
			},
			dealText(value) {
				let text = ''
				if (value < 2) {
					text = 'rate_bad'
				} else if (2 <= value && value <= 3) {
					text = 'rate_normal'
				} else {
					text = 'rate_good'
				}
				return this.lang_goods[text]
			},
			// 表单提交
			saveAction() {
				let queryObj = { orderNumber: this.orderNumber }
				let keys = [
					{ tipsKey: 'commentContentTips', key: 'content', tips: '请输入评价内容' },
					{ tipsKey: 'commentImageTips', key: 'imgUrls', tips: '请上传图片' }
				]
				let list = this.forms
				for (let i = 0, len = list.length; i < len; i++) {
					let item = list[i]
					let index = keys.findIndex(_item => !item[_item.key])
					if (index > -1) return this.$api.msg(this.lang_order[keys[index].tipsKey])
				}
				queryObj.commentDatas = list
				
				if (this.isClick) return;
				this.isClick = true
				orderComment(queryObj).then(data => {
					this.$api.msg('发布成功')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-input {
		width: 688rpx;
		padding: 22rpx 26rpx 24rpx;
		border-radius: 100rpx;
		background-color: #F6F6F6;
	}
	
	.relation {
		&-avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 14rpx;
			background-color: #f9f9f9;
		}
		&-container {
			padding: 16rpx 22rpx 18rpx;
			border-radius: 16rpx;
			background-color: #f9f9f9;
		}
	}
	
</style>
